<template>
  <view
    :class="['uni-row', typeClass, justifyClass, alignClass]"
    :style="{
      marginLeft: `${Number(marginValue)}rpx`,
      marginRight: `${Number(marginValue)}rpx`,
      textAlign: center ? 'center' : 'left',
    }"
  >
    <slot></slot>
  </view>
</template>

<script>
  const ComponentClass = "uni-row";
  const modifierSeparator = "--";
  /**
   * Row	布局-行
   * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
   * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
   *
   * @property	{gutter} type = Number 栅格间隔
   * @property	{justify} type = String flex 布局下的水平排列方式
   * 						可选	start/end/center/space-around/space-between	start
   * 						默认值	start
   * @property	{align} type = String flex 布局下的垂直排列方式
   * 						可选	top/middle/bottom
   * 						默认值	top
   * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
   * 						默认值 750
   */

  export default {
    name: "uniRow",
    componentName: "uniRow",
    // #ifdef MP-WEIXIN
    options: {
      virtualHost: true, // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
    },
    // #endif
    props: {
      center: Boolean,
      type: String,
      gutter: Number,
      justify: {
        type: String,
        default: "start",
      },
      align: {
        type: String,
        default: "top",
      },
      // nvue如果使用span等属性，需要配置宽度
      width: {
        type: [String, Number],
        default: 750,
      },
    },
    created() {
      // #ifdef APP-NVUE
      this.type = "flex";
      // #endif
    },
    computed: {
      marginValue() {
        // #ifndef APP-NVUE
        if (this.gutter) {
          return -(this.gutter / 2);
        }
        // #endif
        return 0;
      },
      typeClass() {
        return this.type === "flex"
          ? `${ComponentClass + modifierSeparator}flex`
          : "";
      },
      justifyClass() {
        return this.justify !== "start"
          ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}`
          : "";
      },
      alignClass() {
        return this.align !== "top"
          ? `${ComponentClass + modifierSeparator}flex-align-${this.align}`
          : "";
      },
    },
  };
</script>

<style lang="scss">
  $layout-namespace: ".uni-";
  $row: $layout-namespace + "row";
  $modifier-separator: "--";

  @mixin utils-clearfix {
    $selector: &;

    @at-root {
      /* #ifndef APP-NVUE */
      #{$selector}::before,
      #{$selector}::after {
        display: table;
        content: "";
      }

      #{$selector}::after {
        clear: both;
      }

      /* #endif */
    }
  }

  @mixin utils-flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
  }

  @mixin set-flex($state) {
    @at-root &-#{$state} {
      @content;
    }
  }

  #{$row} {
    position: relative;
    flex-direction: row;
    // #ifdef MP-WEIXIN
    width: 100%;
    // #endif

    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */

    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */

    // 非nvue使用float布局
    @include utils-clearfix;

    // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
    @at-root {
      /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
      &#{$modifier-separator}flex {
        @include utils-flex;
        flex-wrap: wrap;
        flex: 1;

        &:before,
        &:after {
          /* #ifndef APP-NVUE */
          display: none;
          /* #endif */
        }

        @include set-flex(justify-center) {
          justify-content: center;
        }

        @include set-flex(justify-end) {
          justify-content: flex-end;
        }

        @include set-flex(justify-space-between) {
          justify-content: space-between;
        }

        @include set-flex(justify-space-around) {
          justify-content: space-around;
        }

        @include set-flex(align-middle) {
          align-items: center;
        }

        @include set-flex(align-bottom) {
          align-items: flex-end;
        }
      }

      /* #endif */
    }
  }

  // 字节、QQ配置后不生效
  // 此处用法无法使用scoped
  /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
  :host {
    display: block;
  }

  /* #endif */
</style>
